<template>
  <div>
    <q-infinite-scroll :handler="refresher" ref="infiniteScroll">
      <slot name="content"></slot>
      <!-- 属性的样式 -->
      <div class="row justify-center" style="margin-bottom: 50px;" >
        <q-spinner-bars slot="message" :size="60" color="warning" v-if="enableScrollLoading"/>
        <!-- <h5><q-icon name="sentiment dissatisfied" color="warning"/></h5> -->
        <span v-else style="font-size:1.0em;color:#93851a"><q-icon name="sentiment dissatisfied"/>到我底线了</span>
      </div>
      <!-- 回到顶部 -->
      <q-fixed-position corner="bottom-right" :offset="[0,80]" v-if="enableToTop">
        <q-btn
          color="blue-grey-8"
          round
          v-back-to-top.animate="{offset: 500, duration: 200}"
          class="animate-pop"
          icon="keyboard_arrow_up"/>
      </q-fixed-position>
    </q-infinite-scroll>
  </div>
</template>

<script>
import {
  QBtn,
  QIcon,
  QInfiniteScroll,
  QSpinnerBars,
  BackToTop,
  Ripple,
  QFixedPosition,
  QFab,
  QInput,
} from "quasar";
export default {
  components: {
    QBtn,
    QIcon,
    QInfiniteScroll,
    QSpinnerBars,
    BackToTop,
    Ripple,
    QFixedPosition,
    QFab,
    QInput,
  },
  directives: {
    BackToTop,
    Ripple
  },
  // mixins: [contentEditCompo],
  data() {
    return {
    };
  },
  props: {
    enableScrollLoading: { type: Boolean, default: false },
    enableToTop: { type: Boolean, default: false },
  },
  methods: {
    refresher(index, done) {
      console.log("向下刷新列表", index);
        setTimeout(() => {
          done();
        }, 3000);
        // done();
      this.$emit("trigger-refresh", this.$refs.infiniteScroll);
    },
  }
};
</script>
